import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BarChart } from '../../charts/charts';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
import { actions } from '../action/action';
import { ajax, merge } from '../../helper/helper';
import staticData from '../static/index';
import Modal from '../../common/modal';
import { ContentHeader } from '../../wrapper';
import { Progress, Icon, Button, Tabs, Select } from 'antd';
import TrafficDashboard from './traffic';
import SalesDashboard from './sales';
import TasksDashboard from './task';


const TabPane = Tabs.TabPane;
const Option = Select.Option;


class TaskDashboard extends Component {


    render() {
        const { items, salesItems, handleChange, changeTrigger } = this.props;
        const operations = (<Select defaultValue="week" style={{ width: 120 }} onChange={handleChange}>
            {
                Object.keys(staticData.timeMap).map((item, index) => {
                    return <Option key={index} value={item}>{staticData.timeMap[item]}</Option>
                })
            }
        </Select>);

        return (
            <div className="dashboard">
                <ContentHeader title="报表" icon="dashboard" sprite="standard-sprite" iconClassName="slds-icon-standard-dashboard" subtitle="">
                    <Button style={{ marginRight: 8 }} icon="sync" onClick={changeTrigger}>刷新</Button>
                    <Button type="primary" icon="plus">新增报表</Button>
                </ContentHeader>
                <section className="content">
                    <div className="row">
                        <Tabs defaultActiveKey="1" tabBarExtraContent={operations}>
                            <TabPane tab="客流统计" key="1">
                                <TrafficDashboard />
                            </TabPane>
                            <TabPane tab="销售报表" key="2">
                                <SalesDashboard />
                            </TabPane>
                            <TabPane tab="任务报表" key="3">
                                <TasksDashboard />
                            </TabPane>
                        </Tabs>
                    </div>

                </section>
            </div>
        )
    }
}

const _TaskDashboard = connect(
    state => {
        return {
            items: state.items,
            salesItems: state.salesItems,
            time: state.time
        }
    },
    dispatch => {
        return {
            handleChange: (value) => {
                dispatch({
                    type: 'set-search-time',
                    val: value
                });
            },
            changeTrigger: () => {
                dispatch({
                    type: 'change-trigger'
                });
            }

        }
    }
)(TaskDashboard);



export default _TaskDashboard;




